<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/base.css">
    <script src="../../js/jquery-1.11.0.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/frameAll.js"></script>
    <style>
        .layui-form {
            margin-top: 30px;
        }

        .layui-table-cell {
            overflow: visible !important;
        }

        /* 使得下拉框与单元格刚好合适 */
        td .layui-form-select {
            margin: -11px -15px;
        }
    </style>

</head>
<body>
<form class="layui-form" lay-filter="infoForm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">员工名 : </label>
            <div class="layui-input-inline shortInput">
                <input type="text" name="comployeeName" autocomplete="off" class="layui-input"
                       placeholder="请输入要查询的员工名">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门 : </label>
            <div class="layui-input-inline shortInput">
                <select name="dept">
                    <option value="">所有部门</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别 : </label>
            <div class="layui-input-inline shortInput">
                <input type="checkbox" name="sexNan" title="男" checked>
                <input type="checkbox" name="sexNv" title="女" checked>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="submitBut">查询</button>
        </div>
        <div class="layui-inline" style="float:right;margin-right: 5%">
            <button id="addUser" type="button" class="layui-btn">添加员工</button>
        </div>
    </div>
</form>
<table id="info" lay-filter="comployee"></table>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form;
        var formVal = form.val('infoForm');
        var whereInfo = {
            comployeeName: formVal.comployeeName,
            dept: formVal.dept,
            sexNan: formVal.sexNan,
            sexNv: formVal.sexNv,
        };
        //数据表格
        var tableIns = table.render({
            elem: '#info',
            height: 'full-128',
            url: '/fixedAsset/comployee/page.do',
            cellMinWidth: '138',
            text: {
                none: 'QAQ没有查到数据，换个条件吧'
            },
            where: whereInfo,
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            page: true,
            cols: [[
                {title: '序号', type: 'numbers'},
                {field: 'comployeeNo', title: '员工编号', align: "center", unresize: true},
                {field: 'comployeeName', title: '员工名称', unresize: true},
                {field: 'sex', title: '性别', width: 60, align: "center", unresize: true},
                {field: 'age', title: '年龄', width: 60, align: "center", unresize: true},
                {field: 'dept', title: '部门', unresize: true},
                {field: 'profession', title: '职位', unresize: true},
                {field: 'phone', title: '联系方式', width: 110, align: "center", unresize: true},
                {field: 'address', title: '家庭地址', unresize: true},
                {field: 'comployeeStatu', title: '状态', templet: '#state', align: "center", width: 80, unresize: true},
                {title: '操作', align: "center", toolbar: '#barDemo', unresize: true}
            ]],
            error: function () {
                top.location.href = "../../login.html";
            },
            done: function (res, curr, count) {
                if (res.message) {
                    noMsg(res.message);
                }
            },
        });
        //获取部门列表
        $.ajax({
            type: 'get',
            url: '/fixedAsset/comployee/deptList.do',
            dataType: "Json",
            success: function (data) {
                for (let i = data.length - 1; i >= 0; i--) {
                    $('select[name=dept]').append(new Option(data[i].dept, data[i].dept));
                }
                form.render('select');
            }
        });
        //查询指定条件的用户
        form.on('submit(submitBut)', function (data) {
            var field = data.field;
            whereInfo.comployeeName = field.comployeeName;
            whereInfo.dept = field.dept;
            whereInfo.sexNan = field.sexNan;
            whereInfo.sexNv = field.sexNv;
            tableIns.reload({
                page: {curr: 1}
            });
            return false;
        });
        //状态
        form.on('select(state)', function (stateData) {//修改类型
            let no = stateData.elem.id; //当前数据的id
            let val = stateData.elem.value; //当前字段变化的值
            var title = stateData.elem.title;

            console.log(val);
            console.log(title);
            //修改状态
            if (title !== val) {
                $.ajax({
                    type: 'Post',
                    url: '/fixedAsset/comployee/state.do',
                    data: {
                        no: no,
                        state: val,
                    },
                    dataType: 'Json',
                    success: function (data) {
                        if (data.code === 0) {
                            stateData.elem.title = val;
                            yesMsg(data.message);
                        } else {
                            stateData.elem.value = title;
                            form.render();
                            noMsg(data.message);
                        }
                    }
                });
            }
        });
        //编辑与删除
        table.on('tool(comployee)', function (obj) {
            var data = obj.data
                , layEvent = obj.event;

            if (layEvent === 'update') {
                layer.open({
                    type: 2,
                    title: '编辑用户',
                    area: ['350px', '93%'],
                    resize: false,
                    offset: '3%',
                    btn: ["保存", "取消"],
                    btnAlign: 'c',
                    scrollbar: false,
                    content: "addOrUpdate.html",
                    success: function (layero, index) {
                        $(layero).find("iframe")[0].contentWindow.setInfo(data.comployeeNo);
                    },
                    yes: function (index, layero) {
                        //父页面调用子页面的函数获取返回值
                        var info = $(layero).find("iframe")[0].contentWindow.getInfo();
                        if (!/^[\u4e00-\u9fa5]{2,5}$/.test(info.comployeeName)) {
                            noMsg('姓名为2-5个汉字');
                            return;
                        }
                        if (!/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(info['age'])) {
                            noMsg('年龄在1-120岁之间');
                            return;
                        }
                        if ("" === info['dept']) {
                            noMsg("请选择部门！");
                            return;
                        }
                        if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(info['phone'])) {
                            noMsg("请输入正确的手机号码！");
                            return;
                        }
                        //向后端发送更新信息的请求
                        $.ajax({
                            type: "Post",
                            url: "/fixedAsset/comployee/update.do",
                            data: info,
                            dataType: "Json",
                            success: function (data) {
                                if (data.code === 0) {
                                    yesMsg(data.message);
                                    layer.close(index);
                                    tableIns.reload({
                                        page: {curr: $(".layui-laypage-em").next().html()}
                                    });
                                } else {
                                    noMsg(data.message);
                                }
                            }
                        });
                    }
                });
            } else if (layEvent === 'del') {
                layer.confirm('您确定要删除员工编号为【' + data.comployeeNo + '】的员工吗？', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type: 'Post',
                        url: '/fixedAsset/comployee/delete.do',
                        data: {
                            comployeeName: data.comployeeName
                        },
                        dataType: 'Json',
                        success: function (data) {
                            if (data.code === 0) {
                                yesMsg(data.message);
                                obj.del();
                                layer.close(index);
                            } else {
                                noMsg(data.message);
                            }
                        }
                    });
                });
            }
        });
        //添加用户
        $("#addUser").click(function () {
            layer.open({
                type: 2,
                title: '添加用户',
                area: ['350px', '93%'],
                resize: false,
                offset: '3%',
                btn: ["提交", "取消"],
                btnAlign: 'c',
                scrollbar: false,
                content: "addOrUpdate.html",
                yes: function (index, layero) {
                    //父页面调用子页面的函数获取返回值
                    var info = $(layero).find("iframe")[0].contentWindow.getInfo();
                    if (!/^[\u4e00-\u9fa5]{2,5}$/.test(info.comployeeName)) {
                        noMsg('姓名为2-5个汉字');
                        return;
                    }
                    if (!/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(info['age'])) {
                        noMsg('年龄在1-120岁之间');
                        return;
                    }
                    if ("" === info['dept']) {
                        noMsg("请选择部门！");
                        return;
                    }
                    if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(info['phone'])) {
                        noMsg("请输入正确的手机号码！");
                        return;
                    }
                    //向后端发送更新信息的请求
                    $.ajax({
                        type: "Post",
                        url: "/fixedAsset/comployee/add.do",
                        data: info,
                        dataType: "Json",
                        success: function (data) {
                            if (data.code === 0) {
                                yesMsg(data.message);
                                layer.close(index);
                                tableIns.reload({
                                    page: {curr: $(".layui-laypage-em").next().html()}
                                });
                            } else {
                                noMsg(data.message);
                            }
                        }
                    });
                }
            });
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="del">删除</a>
</script>
<script type="text/html" id="state">
    <select id="{{d.comployeeNo}}" name="state" lay-filter="state" title="{{d.comployeeStatu}}">
        <option value="在职"
                {{ d.comployeeStatu=='在职' ?
        'selected' : '' }}>在职</option>
        <option value="休假"
                {{ d.comployeeStatu=='休假' ?
        'selected' : '' }}>休假</option>
        <option value="离职"
                {{ d.comployeeStatu=='离职' ?
        'selected' : '' }}>离职</option>
    </select>
</script>
</body>
</html>